<template>
  <div id="main-app" :class="[`layout-${currentLayout}`, { 'sidebar-collapsed': isCollapse }]">
    <!-- 布局组件：负责菜单和导航 -->
    <component v-if="menuDataReady" :is="LayoutComponents[currentLayout]" class="layout-wrapper" />
    
    <!-- 加载中提示：使用 ProLoading 统一风格 -->
    <div v-if="!menuDataReady" class="loading-container">
      <ProLoading :visible="true" tip="" />
    </div>
    
    <!-- 🔧 微应用容器：独立于布局，通过CSS定位到正确位置 -->
    <div id="micro-app-container" class="micro-app-container">
      <!-- Ant Design Pro 风格加载效果 - 只在容器内显示 -->
      <div class="micro-loading-wrapper" v-if="isMicroAppLoading">
        <ProLoading :visible="true" tip="正在加载应用..." />
      </div>
      
      <!-- 🔧 微应用实际挂载的容器 - 保持稳定，不受水印影响 -->
      <div id="micro-container" v-show="!isMicroAppLoading"></div>
    </div>
    
    <!-- 🔧 水印层：独立的覆盖层，通过 v-if 控制显示隐藏，不影响微应用容器 -->
    <Watermark 
      v-if="isWatermark" 
      :text="watermarkText" 
      :fontSize="14" 
      :opacity="0.15" 
      :rotate="-15" 
      :gap="[120, 100]"
      class="global-watermark-overlay"
    />
    
    <!-- 主题设置抽屉 -->
    <ThemeDrawer />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed, type Component } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useGlobalStore } from '@/store/modules/global';
import { storeToRefs } from 'pinia';
import { Loading } from '@element-plus/icons-vue';
import { loadMenuData } from '@/services/menuService';
import loginService from '@/services/loginService';
import ProLoading from '@/components/ProLoading/index.vue';
import actions from '@/stores/globalState';
import Watermark from '@/components/Watermark/index.vue';
import { useTheme } from '@/hooks/useTheme';
import { getToken as getCookieToken } from '@/utils/cookies';
// import { PageTransition } from '@tuxing/ui-components'; // 暂时注释，等包构建完成后启用

// 导入布局组件
import LayoutVertical from '@/layout/LayoutVertical/index.vue';
import LayoutClassic from '@/layout/LayoutClassic/index.vue';
import LayoutTransverse from '@/layout/LayoutTransverse/index.vue';
import LayoutColumns from '@/layout/LayoutColumns/index.vue';
import ThemeDrawer from '@/components/ThemeDrawer/index.vue';

const router = useRouter();

// 使用全局状态
const globalStore = useGlobalStore();
const { layout: piniaLayout, isCollapse: piniaIsCollapse, isWatermark } = storeToRefs(globalStore);
const currentLayout = ref(piniaLayout.value);
const isCollapse = ref(piniaIsCollapse.value);

// 菜单数据是否加载完成
const menuDataReady = ref(false);

// 页面加载状态（用于页面切换遮罩）
const isPageLoading = ref(false);

// 微应用加载状态（用于 Ant Design Pro 风格的加载效果）
const isMicroAppLoading = ref(false);

// 🆕 初始化登录服务
const initLoginService = async () => {
  console.log('[App.vue] 🎯 初始化登录服务');

  // 1️⃣ 首先检查 URL 中的登录参数（从 login-app 重定向回来）
  const urlLoginState = loginService.initializeFromURL();

  if (urlLoginState.isLoggedIn) {
    console.log('[App.vue] ✅ 从 URL 参数检测到登录成功');
    // token 已在 loginService 中设置和同步

    // 获取重定向路径
    const urlParams = new URLSearchParams(window.location.search);
    const redirectPath = urlParams.get('redirect');

    // 加载用户数据（会触发 token 同步等）
    await getUserData();
    await getMenuData();

    // 重定向到原始页面
    if (redirectPath) {
      console.log('[App.vue] 🔄 重定向到:', decodeURIComponent(redirectPath));
      setTimeout(() => {
        router.push(decodeURIComponent(redirectPath));
      }, 100);
    }
  } else {
    // 2️⃣ 尝试从本地存储恢复登录状态
    const restored = loginService.restoreFromStorage();

    if (restored) {
      console.log('[App.vue] ✅ 从本地存储恢复登录状态');
      // 加载菜单数据
      await getMenuData();
    } else {
      console.log('[App.vue] ℹ️ 未检测到登录状态');
      // 路由守卫会处理重定向到登录页
    }
  }
};

// 修改原有的 getTokenFromStorage 函数
const getTokenFromStorage = (): string | null => {
  return loginService.getToken();
};

// 获取菜单数据的函数
const getMenuData = async () => {
  console.log('=== getMenuData 函数开始执行 ===');
  
  try {
    // ⚠️ 检查是否有 token，没有 token 则跳过（用户未登录）
    const token = getTokenFromStorage();
    if (!token) {
      console.log('[App.vue] ⚠️ 没有 token，跳过菜单数据加载');
      console.log('[App.vue] 💡 用户登录后会自动加载菜单');
      globalStore.$patch({ menuList: [] });
      return;
    }
    
    // 检查 Pinia store 中是否已有菜单数据
    const globalState = globalStore.$state;
    console.log('globalState:', globalState);
    
    if (globalState.menuList && globalState.menuList.length > 0) {
      console.log('✅ 菜单数据已存在于 Pinia，无需重新加载');
    } else {
      console.log('📡 从 API 加载菜单数据...');
      // 从 API 获取菜单数据
      const menuData = await loadMenuData();
      console.log('📥 API 返回的菜单数据:', menuData);
      
      // 更新到 Pinia store
      globalStore.$patch({ menuList: menuData });
      console.log('✅ 菜单数据已更新到 Pinia store');
      
      // 🔧 关键：同时更新到 Qiankun 全局状态（布局组件从这里读取）
      (actions as any).setGlobalState({ menuList: menuData });
      console.log('✅ 菜单数据已更新到 Qiankun 全局状态');
    }
  } catch (error: any) {
    console.error('❌ 获取菜单数据失败:', error);
    console.error('错误详情:', error.message);
    console.error('错误堆栈:', error.stack);
    // 即使失败也设置空数组，避免undefined
    globalStore.$patch({ menuList: [] });
  } finally {
    // 无论成功还是失败，都标记为已加载完成
    menuDataReady.value = true;
    console.log('=== 菜单数据加载完成，允许渲染布局组件 ===');
  }
  console.log('=== getMenuData 函数执行完成 ===');
};

// 立即开始加载菜单数据，不等到onMounted
console.log('=== App.vue setup 阶段，立即开始加载菜单数据 ===');

// 监听 Pinia store 的布局变化
watch(piniaLayout, (newLayout) => {
  console.log('App.vue: Pinia 布局变化:', newLayout);
  currentLayout.value = newLayout as any;
});

// 监听 Pinia store 的折叠状态变化
watch(piniaIsCollapse, (newIsCollapse) => {
  console.log('App.vue: Pinia 折叠状态变化:', newIsCollapse);
  isCollapse.value = newIsCollapse as any;
});

// 布局组件映射
const LayoutComponents: Record<string, Component> = {
  vertical: LayoutVertical,
  classic: LayoutClassic,
  transverse: LayoutTransverse,
  columns: LayoutColumns,
};

// 水印文本
const watermarkText = computed(() => {
  const userInfo = globalStore.userInfo;
  // 如果有用户信息，显示用户名；否则显示默认水印
  if (userInfo?.username) {
    return userInfo.username;
  }
  // 未登录时显示系统默认水印
  return '微前端管理系统\nMicro Frontend';
});

// 🔧 获取用户信息的函数
const getUserData = async () => {
  console.log('========== getUserData 开始执行 ==========');
  try {
    // 检查是否有 token，没有 token 则跳过（可能未登录）
    const token = getTokenFromStorage();
    if (!token) {
      console.log('[App.vue] ⚠️ 没有 token，跳过用户信息初始化');
      return;
    }
    
    console.log('[App.vue] 📡 调用 API 获取用户信息...');
    const { getUserInfo } = await import('@/api/menu');
    const response = await getUserInfo();
    
    console.log('[App.vue] 📥 API 响应:', response);
    
    if (response && response.data) {
      const userInfo = response.data;
      
      // 提取 userId（支持多种可能的字段名）
      const userId = userInfo.user?.userId || 
                     userInfo.user?.id || 
                     userInfo.userId || 
                     userInfo.id;
      
      // 提取 tenantId（如果后端返回）
      const tenantId = userInfo.user?.tenantId || 
                       userInfo.tenantId ||
                       userInfo.user?.deptId; // 备用：部门ID
      
      console.log('[App.vue] 📊 提取的用户数据:', { userId, tenantId });
      
      // 使用 @tuxing/utils-base 保存 userId 和 tenantId
      if (userId) {
        const { setCurrentUserId } = await import('@tuxing/utils-base');
        setCurrentUserId(userId);
        console.log('[App.vue] ✅ userId 已保存到 localStorage:', userId);
      } else {
        console.warn('[App.vue] ⚠️ 未找到 userId');
      }
      
      if (tenantId) {
        const { setCurrentTenantId } = await import('@tuxing/utils-base');
        setCurrentTenantId(tenantId);
        console.log('[App.vue] ✅ tenantId 已保存到 localStorage:', tenantId);
      } else {
        console.warn('[App.vue] ⚠️ 未找到 tenantId（如果是单租户系统，可以忽略）');
      }
      
      // 保存完整的用户信息到 Pinia store（可选）
      // globalStore.$patch({ userInfo: userInfo });
      
      console.log('[App.vue] ✅ 用户信息初始化完成');
    } else {
      console.warn('[App.vue] ⚠️ API 响应数据为空');
    }
  } catch (error: any) {
    console.error('[App.vue] ❌ 获取用户信息失败:', error?.message);
    console.error('[App.vue] 错误堆栈:', error?.stack);
    // 即使失败也不影响应用运行
  }
  console.log('[App.vue] ========== getUserData 执行完成 ==========');
};

// 在 setup 中调用初始化
onMounted(async () => {
  console.log('[App.vue] 📌 组件挂载，初始化登录服务');
  await initLoginService();
  menuDataReady.value = true;

  // 监听微应用加载事件
  const handleMicroAppLoading = (event: any) => {
    const { loading, appName } = event.detail;
    console.log(`[App.vue] 微应用加载状态变化:`, { loading, appName });
    isMicroAppLoading.value = loading;
  };
  
  window.addEventListener('micro-app-loading', handleMicroAppLoading);
  
  // 组件卸载时移除监听器
  const cleanup = () => {
    window.removeEventListener('micro-app-loading', handleMicroAppLoading);
  };
  
  // 在组件卸载时清理
  (globalThis as any).__microAppLoadingCleanup = cleanup;
  
  // 监听路由变化，显示页面加载遮罩
  router.beforeEach((to, from, next) => {
    if (to.path !== from.path) {
      isPageLoading.value = true;
    }
    next();
  });

  router.afterEach((to, from) => {
    // 延迟隐藏遮罩，确保页面渲染完成
    setTimeout(() => {
      isPageLoading.value = false;
    }, 300);
  });

  console.log('=== App.vue onMounted 执行完成 ===');
});
</script>

<script lang="ts">
export default {
  name: 'App'
};
</script>

<style scoped lang="scss">
#main-app {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

// 布局组件：负责菜单和导航
.layout-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0;
  
  :deep(.layout) {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

// 🔧 微应用容器：独立于布局，通过绝对定位覆盖在主内容区域
.micro-app-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  
  // 水印和微应用容器 - 确保水印也不拦截鼠标事件
  :deep(.watermark-container) {
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  
  // 加载包装器 - 居中显示加载状态
  .micro-loading-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    pointer-events: auto;
    z-index: 10;
  }
  
  #micro-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    pointer-events: auto;
  }
}

// 🔧 全局水印覆盖层 - 独立于微应用容器
.global-watermark-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998; // 在微应用容器之上，但在弹窗等元素之下
  
  :deep(.watermark-container) {
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
}

// 确保 header 和导航区域在微应用容器之上
:deep(.el-header),
:deep(.el-aside),
:deep(.aside-split),
:deep(.layout-header),
:deep(.layout-sidebar) {
  position: relative;
  z-index: 100;
}

// 根据不同布局调整微应用容器的位置
// 垂直布局：顶部header + 左侧侧边栏
.layout-vertical .micro-app-container {
  top: 64px; // Ant Design Pro 标准 Header 高度
  left: 256px; // 侧边栏展开时的宽度
  transition: left 0.3s ease; // 平滑过渡效果
}

// 垂直布局 - 侧边栏收起时
.layout-vertical.sidebar-collapsed .micro-app-container {
  left: 64px; // 侧边栏收起时的宽度（Ant Design Pro 标准）
}

// 经典布局：顶部header + 左侧侧边栏
.layout-classic .micro-app-container {
  top: 64px; // Ant Design Pro 标准 Header 高度
  left: 210px; // 侧边栏展开时的宽度
  transition: left 0.3s ease;
}

// 经典布局 - 侧边栏收起时
.layout-classic.sidebar-collapsed .micro-app-container {
  left: 65px; // 侧边栏收起时的宽度（与 LayoutClassic 的 65px 一致）
}

// 横向布局：只有顶部header
.layout-transverse .micro-app-container {
  top: 64px; // Ant Design Pro 标准 Header 高度
}

// 分栏布局：顶部header + 左侧两级侧边栏
.layout-columns .micro-app-container {
  top: 64px; // Ant Design Pro 标准 Header 高度
  left: 275px; // 侧边栏展开时的宽度
  transition: left 0.3s ease;
}

// 分栏布局 - 侧边栏收起时
.layout-columns.sidebar-collapsed .micro-app-container {
  left: 129px; // 分栏（64px）+ 二级菜单收起（65px）
}

// 加载中提示
.loading-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 9999;
}

// 微应用骨架屏
.micro-app-skeleton {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
  background-color: var(--el-bg-color);
  z-index: 999;
  flex-direction: column;
  gap: 20px;
  opacity: 0;
  animation: fadeIn 0.3s ease-in forwards;

  &.skeleton-active {
    display: flex;
  }

  &.skeleton-fade-out {
    animation: fadeOut 0.3s ease-out forwards;
  }
}

.skeleton-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.skeleton-avatar {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background-color: var(--el-fill-color-light);
}

.skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-title {
  width: 40%;
  height: 24px;
  border-radius: 4px;
  background-color: var(--el-fill-color-light);
}

.skeleton-subtitle {
  width: 25%;
  height: 16px;
  border-radius: 4px;
  background-color: var(--el-fill-color-lighter);
}

.skeleton-toolbar {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  background-color: var(--el-fill-color-light);
}

.skeleton-content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background-color: var(--el-fill-color-blank);
  border-radius: 8px;
}

.skeleton-row {
  width: 100%;
  height: 20px;
  border-radius: 4px;
  background-color: var(--el-fill-color-light);
}

.skeleton-animated {
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    animation: skeletonLoading 1.5s ease-in-out infinite;
  }
}

.skeleton-loading-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-top: 16px;

  .el-icon {
    color: var(--el-color-primary);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes skeletonLoading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

// 暗黑模式下的骨架屏样式
[data-theme='dark'] {
  .micro-app-skeleton {
    background-color: var(--el-bg-color-overlay);
  }

  .skeleton-avatar,
  .skeleton-title,
  .skeleton-toolbar,
  .skeleton-row {
    background-color: var(--el-fill-color);
  }

  .skeleton-subtitle {
    background-color: var(--el-fill-color-light);
  }

  .skeleton-animated::after {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.05),
      transparent
    );
  }
}
</style>

<!-- 🔧 全局样式：确保 Element Plus 下拉菜单（popper）在微应用容器之上 -->
<!-- Element Plus 的 popper 组件会被添加到 body，需要使用全局样式 -->
<style lang="scss">
// 确保 Element Plus 的下拉菜单、弹出层等组件在微应用容器之上
.el-popper,
.el-menu--popup,
.el-sub-menu__popper,
.el-select-dropdown,
.el-date-picker,
.el-picker__popper,
.el-dropdown-menu,
.el-tooltip__popper,
.el-popover {
  z-index: 2000 !important;
}

// 🔧 菜单折叠时：隐藏子菜单的展开箭头（Ant Design Pro 标准）
.el-menu.el-menu--collapse {
  .el-sub-menu__icon-arrow {
    display: none !important;
  }
}
</style>